<template>
  <!--基础属性-->
  <nf-form
    v-form-drag="baseGridProps"
    :model="meta.gridMeta"
    v-bind="baseGridProps"
    size="small"
    label-width="110px"
  >
  </nf-form>
  <nf-form
    v-form-drag="baseGridTable"
    :model="meta.gridTable"
    v-bind="baseGridTable"
    size="small"
    label-width="110px"
  >
  </nf-form>
  <el-input v-if="false"
    v-model="json"
    type="textarea"
    :autosize="{ minRows: 4, maxRows: 10 }"
    placeholder=""
  ></el-input>
</template>

<script lang="ts">
  import { defineComponent, reactive, computed, watch } from 'vue'
  import grid_base from './json/grid-base.json'
  import grid_table from './json/grid-table.json'

  export default defineComponent({
    name: 'nf-help-grid-item',
    props: {
      meta: Object,
      reMeta: Object
    },
    setup(props, context) {
      // 基础属性的表单需要的 meta，创建表单用
      const baseGridProps = reactive(grid_base)
      const baseGridTable = reactive(grid_table)

      // 定义表单的 model
      const { meta, reMeta } = props
     
      watch(props.meta.gridTable, () => {
        // 看看属性，如果是默认值，则去掉
        Object.keys(baseGridTable.itemMeta).forEach(key => {
          const item = baseGridTable.itemMeta[key]
          const colName = item.colName
          const val = props.meta.gridTable[colName]

          switch (colName) {
            case 'height':
            case 'show-header':
            case 'fit':
            case 'select-on-indeterminate':
            case 'lazy':
              // 不删除的属性
              props.reMeta.gridTable[colName] = val
              break
            default:
              // 如果是默认值、空，则删除属性
              if (!(val) || val === item.defValue) {
                delete props.reMeta.gridTable[colName]
              } else {
                 props.reMeta.gridTable[colName] = val
              }

              break
          }
        })
        

      })

      // 设置 colOrder 的备选项
      watch(meta.itemMeta, () => {
        baseGridProps.itemMeta[200].optionList.length = 0
        Object.keys(meta.itemMeta).forEach(key => {
          const item = meta.itemMeta[key]
          baseGridProps.itemMeta[200].optionList.push({
            "value": item.id,
            "label": item.label // colName
          })
        })
      }, {immediate: true})
      
      // 表单的 meta 的序列化，用于调整表单布局后的导出
      const json = computed(() => JSON.stringify(baseGridProps, null ,2))

      return {
        baseGridProps,
        baseGridTable,
        reMeta,
        json
      }
    }
  })
</script>